CSS View Transitions'da Uzmanlaşma: Pseudo-Element Stilinin Derinlemesine İncelenmesi

Sürekli gelişen web geliştirme dünyasında, kesintisiz, akıcı ve ilgi çekici bir kullanıcı deneyimi arayışı süreklidir. Yıllardır geliştiriciler, özellikle sayfa geçişlerinin pürüzsüzlüğü konusunda, web ile yerel uygulamalar arasındaki boşluğu doldurmaya çalıştılar. Geleneksel web navigasyonu genellikle, kullanıcının deneyimini anlık olarak bölen boş bir beyaz ekranla sonuçlanan sert, tam sayfa yeniden yüklemelerine neden olur. Tek Sayfalı Uygulamalar (SPA'lar) bunu azalttı, ancak özel, anlamlı geçişler oluşturmak, büyük ölçüde JavaScript kütüphanelerine ve karmaşık durum yönetimine dayanan, karmaşık ve genellikle kırılgan bir görev olarak kaldı.

Karşınızda, web'deki arayüz değişikliklerini ele alma biçimimizde devrim yaratmaya hazırlanan, oyunun kurallarını değiştiren bir teknoloji olan CSS View Transitions API. Bu güçlü API, farklı DOM durumları arasında animasyon yapmak için basit ama inanılmaz derecede esnek bir mekanizma sunarak, kullanıcıların beklediği gösterişli, uygulama benzeri deneyimleri yaratmayı her zamankinden daha kolay hale getiriyor. Bu API'nin gücünün merkezinde bir dizi yeni CSS pseudo-elementi yatmaktadır. Bunlar tipik seçicileriniz değildir; tarayıcı tarafından bir geçişin her aşaması üzerinde size ayrıntılı kontrol sağlamak için oluşturulan dinamik, geçici elementlerdir. Bu kılavuz, sizi bu pseudo-element ağacının derinliklerine götürecek ve küresel bir kitle için çarpıcı, performanslı ve erişilebilir animasyonlar oluşturmak üzere her bir bileşenin nasıl stillendirileceğini keşfedecektir.

Bir View Transition'ın Anatomisi

Bir geçişe stil vermeden önce, bir tane tetiklendiğinde perde arkasında ne olduğunu anlamalıyız. Bir görünüm geçişi başlattığınızda (örneğin, document.startViewTransition() çağırarak), tarayıcı bir dizi adım gerçekleştirir:

• Eski Durumu Yakala: Tarayıcı, mevcut sayfanın durumunun bir "ekran görüntüsünü" alır.
• DOM'u Güncelle: Kodunuz daha sonra DOM'da değişikliklerini yapar (örneğin, yeni bir görünüme gitmek, element eklemek veya kaldırmak).
• Yeni Durumu Yakala: DOM güncellemesi tamamlandığında, tarayıcı yeni durumun bir ekran görüntüsünü alır.
• Pseudo-Element Ağacını Oluştur: Tarayıcı daha sonra sayfanın katmanında geçici bir pseudo-element ağacı oluşturur. Bu ağaç, eski ve yeni durumların yakalanan görüntülerini içerir.
• Animasyon Uygula: Bu pseudo-elementlere CSS animasyonları uygulanarak eski durumdan yeni duruma pürüzsüz bir geçiş oluşturulur. Varsayılan, basit bir çapraz geçiştir (cross-fade).
• Temizle: Animasyonlar tamamlandığında, pseudo-element ağacı kaldırılır ve kullanıcı yeni, canlı DOM ile etkileşime girebilir.

Özelleştirmenin anahtarı, bu geçici pseudo-element ağacıdır. Bunu, sayfanızın üzerine geçici olarak yerleştirilmiş bir tasarım aracındaki katmanlar gibi düşünün. Bu katmanlar üzerinde tam CSS kontrolüne sahipsiniz. İşte çalışacağınız yapı:

• ::view-transition
  • ::view-transition-group(*)
    • ::view-transition-image-pair(*)
      • ::view-transition-old(*)
      • ::view-transition-new(*)

Bu pseudo-elementlerin her birinin neyi temsil ettiğini inceleyelim.

Pseudo-Element Kadrosu

::view-transition: Bu, tüm yapının köküdür. Görüntü alanını dolduran ve diğer tüm sayfa içeriğinin üzerinde oturan tek bir elementtir. Tüm geçiş grupları için bir kap görevi görür ve süre veya zamanlama işlevi gibi genel geçiş özelliklerini ayarlamak için harika bir yerdir.

::view-transition-group(*): Her bir farklı geçiş elementi için (view-transition-name CSS özelliği ile tanımlanır) bir grup oluşturulur. Bu pseudo-element, içeriğinin konumunu ve boyutunu canlandırmaktan sorumludur. Ekranın bir tarafından diğerine hareket eden bir kartınız varsa, aslında hareket eden ::view-transition-group'tur.

::view-transition-image-pair(*): Grubun içine yerleştirilmiş bu element, eski ve yeni görünümler için bir kap ve bir kırpma maskesi görevi görür. Birincil rolü, animasyon sırasında border-radius veya transform gibi efektleri korumak ve varsayılan çapraz geçiş animasyonunu yönetmektir.

::view-transition-old(*): Bu, elementin eski durumundaki (DOM değişikliğinden önceki) "ekran görüntüsünü" veya oluşturulmuş görünümünü temsil eder. Varsayılan olarak, opacity: 1'den opacity: 0'a canlandırılır.

::view-transition-new(*): Bu, elementin yeni durumundaki (DOM değişikliğinden sonraki) "ekran görüntüsünü" veya oluşturulmuş görünümünü temsil eder. Varsayılan olarak, opacity: 0'dan opacity: 1'e canlandırılır.

Kök: ::view-transition Pseudo-Elementini Şekillendirme

::view-transition pseudo-elementi, tüm animasyonunuzun boyandığı tuvaldir. En üst düzey kap olarak, geçişe küresel olarak uygulanması gereken özellikleri tanımlamak için ideal bir yerdir. Varsayılan olarak, tarayıcı bir dizi animasyon sağlar, ancak bunları kolayca geçersiz kılabilirsiniz.

Örneğin, varsayılan geçiş 250 milisaniye süren bir çapraz geçiştir. Sitenizdeki her geçiş için bunu değiştirmek isterseniz, kök pseudo-elementini hedefleyebilirsiniz:

::view-transition {

  animation-duration: 500ms;

  animation-timing-function: ease-in-out;

}

Bu basit kural şimdi tüm varsayılan sayfa geçişlerinin iki kat daha uzun sürmesini ve bir 'ease-in-out' eğrisi kullanmasını sağlayarak onlara biraz farklı bir his verir. Burada karmaşık animasyonlar uygulayabilseniz de, genellikle evrensel zamanlama ve yumuşatmayı tanımlamak için kullanılır ve daha spesifik pseudo-elementlerin ayrıntılı koreografiyi işlemesine izin verilir.

Gruplama ve Adlandırma: `view-transition-name` Gücü

Kutudan çıktığı gibi, ekstra bir çaba sarf etmeden, View Transition API tüm sayfa için bir çapraz geçiş sağlar. Bu, kök için tek bir pseudo-element grubu tarafından yönetilir. API'nin gerçek gücü, belirli, bireysel elementleri durumlar arasında geçirmek istediğinizde ortaya çıkar. Örneğin, bir liste sayfasındaki bir ürün küçük resminin, bir detay sayfasındaki ana ürün resmi konumuna sorunsuzca büyüyüp hareket etmesini sağlamak gibi.

Tarayıcıya farklı DOM durumlarındaki iki elementin kavramsal olarak aynı olduğunu söylemek için view-transition-name CSS özelliğini kullanırsınız. Bu özellik hem başlangıç elementine hem de bitiş elementine uygulanmalıdır.

/* Liste sayfası CSS'inde */

.product-thumbnail {

  view-transition-name: product-image;

}

/* Detay sayfası CSS'inde */

.main-product-image {

  view-transition-name: product-image;

}

Her iki elemente de aynı benzersiz adı ('product-image' bu durumda) vererek, tarayıcıya şu talimatı verirsiniz: "Sadece eski sayfayı karartıp yeni sayfayı aydınlatmak yerine, bu belirli element için özel bir geçiş oluştur." Tarayıcı şimdi animasyonunu kök geçişinden ayrı olarak yönetmek için özel bir ::view-transition-group(product-image) oluşturacaktır. Bu, popüler "şekil değiştirme" veya "paylaşılan element" geçiş efektini sağlayan temel kavramdır.

Önemli Not: Bir geçiş sırasında herhangi bir anda, bir view-transition-name benzersiz olmalıdır. Aynı anda aynı isme sahip iki görünür elementiniz olamaz.

Derinlemesine Stil Verme: Temel Pseudo-Elementler

Elementlerimizi adlandırdığımıza göre, şimdi tarayıcının onlar için oluşturduğu belirli pseudo-elementleri şekillendirmeye başlayabiliriz. Burası gerçekten özel ve etkileyici animasyonlar oluşturabileceğiniz yerdir.

`::view-transition-group(name)`: Hareket Ettirici

Grubun tek sorumluluğu, eski elementin boyutundan ve konumundan yeni elementin boyutuna ve konumuna geçiş yapmaktır. İçeriğin gerçek görünümünü değil, yalnızca sınırlayıcı kutusunu içerir. Bunu hareketli bir çerçeve olarak düşünün.

Varsayılan olarak, tarayıcı transform ve width/height özelliklerini canlandırır. Farklı efektler oluşturmak için bunu geçersiz kılabilirsiniz. Örneğin, eğri bir yol boyunca canlandırarak hareketine bir kavis ekleyebilir veya yolculuğu sırasında büyüyüp küçülmesini sağlayabilirsiniz.

::view-transition-group(product-image) {

  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

}

Bu örnekte, sadece ürün resminin hareketine özel bir yumuşatma işlevi uyguluyoruz, bu da sayfanın geri kalanının varsayılan geçişini etkilemeden onu daha dinamik ve fiziksel hissettiriyor.

`::view-transition-image-pair(name)`: Kırpıcı ve Karartıcı

Hareketli grubun içinde yer alan image-pair, eski ve yeni görünümleri tutar. Bir kırpma maskesi görevi görür, bu nedenle elementinizin bir border-radius'u varsa, image-pair, boyut ve konum animasyonu boyunca içeriğin bu yarıçapla kırpılmış kalmasını sağlar. Diğer ana görevi, eski ve yeni içerik arasındaki varsayılan çapraz geçişi düzenlemektir.

Görsel tutarlılığı sağlamak veya daha gelişmiş efektler oluşturmak için bu elementi şekillendirmek isteyebilirsiniz. Dikkate alınması gereken önemli bir özellik isolation: isolate'dir. Bu, çocuklarda (eski ve yeni) gelişmiş mix-blend-mode efektleri kullanmayı planlıyorsanız çok önemlidir, çünkü yeni bir yığınlama bağlamı oluşturur ve karıştırmanın geçiş grubunun dışındaki elementleri etkilemesini önler.

::view-transition-image-pair(product-image) {

  isolation: isolate;

}

`::view-transition-old(name)` ve `::view-transition-new(name)`: Şovun Yıldızları

Bunlar, DOM değişikliğinden önce ve sonra elementinizin görsel görünümünü temsil eden pseudo-elementlerdir. Özel animasyon çalışmalarınızın çoğu burada gerçekleşecektir. Varsayılan olarak, tarayıcı opacity ve mix-blend-mode kullanarak üzerlerinde basit bir çapraz geçiş animasyonu çalıştırır. Özel bir animasyon oluşturmak için önce varsayılan olanı kapatmalısınız.

::view-transition-old(name),

::view-transition-new(name) {

  animation: none;

}

Varsayılan animasyon devre dışı bırakıldığında, kendi animasyonunuzu uygulamakta özgürsünüz. Birkaç yaygın deseni keşfedelim.

Özel Animasyon: Kaydırma

Bir çapraz geçiş yerine, bir kabın içeriğinin kayarak girmesini sağlayalım. Örneğin, makaleler arasında gezinirken, yeni makalenin metninin sağdan kayarak girmesini, eski metnin ise sola doğru kayarak çıkmasını istiyoruz.

Önce keyframe'leri tanımlayın:

@keyframes slide-from-right {

  from { transform: translateX(100%); }

  to { transform: translateX(0); }

}

@keyframes slide-to-left {

  from { transform: translateX(0); }

  to { transform: translateX(-100%); }

}

Şimdi, bu animasyonları 'article-content' adlı element için eski ve yeni pseudo-elementlere uygulayın.

::view-transition-old(article-content) {

  animation: 300ms ease-out forwards slide-to-left;

}

::view-transition-new(article-content) {

  animation: 300ms ease-out forwards slide-from-right;

}

Özel Animasyon: 3D Çevirme

Daha dramatik bir etki için, bir 3D kart çevirme oluşturabilirsiniz. Bu, transform özelliğini rotateY ile canlandırmayı ve ayrıca backface-visibility'yi yönetmeyi gerektirir.

/* Grubun 3D bir bağlama ihtiyacı var */

::view-transition-group(card-flipper) {

  transform-style: preserve-3d;

}

/* Image-pair'in de 3D bağlamını koruması gerekiyor */

::view-transition-image-pair(card-flipper) {

  transform-style: preserve-3d;

}

/* Eski görünüm 0'dan -180 dereceye döner */

::view-transition-old(card-flipper) {

  animation: 600ms ease-in forwards flip-out;

  backface-visibility: hidden;

}

/* Yeni görünüm 180'den 0 dereceye döner */

::view-transition-new(card-flipper) {

  animation: 600ms ease-out forwards flip-in;

  backface-visibility: hidden;

}

@keyframes flip-out {

  from { transform: rotateY(0deg); }

  to { transform: rotateY(-180deg); }

}

@keyframes flip-in {

  from { transform: rotateY(180deg); }

  to { transform: rotateY(0deg); }

}

Pratik Örnekler ve Gelişmiş Teknikler

Teori faydalıdır, ama gerçekten öğrendiğimiz yer pratik uygulamadır. Bazı yaygın senaryoları ve bunları görünüm geçişi pseudo-elementleriyle nasıl çözeceğimizi inceleyelim.

Örnek: "Şekil Değiştiren" Kart Küçük Resmi

Bu, klasik paylaşılan element geçişidir. Kullanıcı profillerinden oluşan bir galeri düşünün. Her profil, bir avatarı olan bir karttır. Bir karta tıkladığınızda, aynı avatarın üstte belirgin bir şekilde gösterildiği bir detay sayfasına gidersiniz.

Adım 1: İsimleri Ata

Galeri sayfanızda, avatar resmi bir isim alır. İsim, her kart için benzersiz olmalıdır, örneğin kullanıcının kimliğine göre.

/* gallery-item.css içinde */

.card-avatar { view-transition-name: avatar-user-123; }

Profil detay sayfasında, büyük başlık avatarı tam olarak aynı adı alır.

/* profile-page.css içinde */

.profile-header-avatar { view-transition-name: avatar-user-123; }

Adım 2: Animasyonu Özelleştir

Varsayılan olarak, tarayıcı avatarı hareket ettirip ölçekleyecektir, ancak aynı zamanda içeriği çapraz geçişle değiştirecektir. Görüntü aynıysa, bu geçiş gereksizdir ve hafif bir titremeye neden olabilir. Bunu devre dışı bırakabiliriz.

/* Buradaki yıldız (*) herhangi bir adlandırılmış grup için bir joker karakterdir */

::view-transition-image-pair(*) {

  /* Varsayılan geçişi devre dışı bırak */

  animation-duration: 0s;

}

Bekleyin, eğer geçişi devre dışı bırakırsak, içerik nasıl değişir? Eski ve yeni görünümlerin aynı olduğu paylaşılan elementler için, tarayıcı tüm geçiş için sadece bir görünüm kullanacak kadar akıllıdır. `image-pair` esasen sadece bir resim tutar, bu nedenle geçişi devre dışı bırakmak sadece bu optimizasyonu ortaya çıkarır. İçeriğin gerçekten değiştiği elementler için, varsayılan geçiş yerine özel bir animasyona ihtiyacınız olacaktır.

En Boy Oranı Değişikliklerini Yönetme

Geçiş yapan bir elementin en boy oranını değiştirmesi sık karşılaşılan bir zorluktur. Örneğin, bir liste sayfasındaki 16:9 yatay küçük resim, detay sayfasında 1:1 kare bir avatara geçiş yapabilir. Tarayıcının varsayılan davranışı, genişliği ve yüksekliği bağımsız olarak canlandırmaktır, bu da görüntünün geçiş sırasında ezilmiş veya gerilmiş görünmesine neden olur.

Çözüm zariftir. ::view-transition-group'un boyut ve konum değişikliğini yönetmesine izin veririz, ancak içindeki eski ve yeni görüntülerin stilini geçersiz kılarız.

Amaç, eski ve yeni "ekran görüntülerini" bozulmadan kaplarını doldurmalarını sağlamaktır. Bunu, genişliklerini ve yüksekliklerini %100'e ayarlayarak ve tarayıcının varsayılan object-fit özelliğinin (orijinal elementten miras alınır) ölçeklemeyi doğru bir şekilde yönetmesine izin vererek yapabiliriz.

::view-transition-old(hero-image),

::view-transition-new(hero-image) {

  /* Kabı doldurarak bozulmayı önle */

  width: 100%;

  height: 100%;

  

  /* Etkiyi net görmek için varsayılan çapraz geçişi geçersiz kıl */

  animation: none;

}

Bu CSS ile, `image-pair` en boy oranını sorunsuzca canlandıracak ve içindeki resimler, normal bir kapta olacağı gibi, `object-fit` değerlerine bağlı olarak doğru bir şekilde kırpılacak veya letterbox uygulanacaktır. Daha sonra bu düzeltilmiş geometrinin üzerine çapraz geçiş gibi kendi özel animasyonlarınızı ekleyebilirsiniz.

Hata Ayıklama ve Tarayıcı Desteği

Sadece bir saniyenin kesri kadar var olan elementleri şekillendirmek zor olabilir. Neyse ki, modern tarayıcılar bunun için mükemmel geliştirici araçları sunar. Chrome veya Edge Geliştirici Araçları'nda, "Animasyonlar" paneline gidebilir ve bir görünüm geçişini tetiklediğinizde onu duraklatabilirsiniz. Animasyon duraklatıldığında, "Elementler" panelini kullanarak tüm `::view-transition` pseudo-element ağacını DOM'un diğer herhangi bir parçası gibi inceleyebilirsiniz. Uygulanan stilleri görebilir ve hatta animasyonlarınızı mükemmelleştirmek için bunları gerçek zamanlı olarak değiştirebilirsiniz.

2023'ün sonları itibarıyla, View Transitions API, Chromium tabanlı tarayıcılarda (Chrome, Edge, Opera) desteklenmektedir. Firefox ve Safari için uygulamalar devam etmektedir. Bu, onu aşamalı geliştirme için mükemmel bir aday yapar. Desteklenen tarayıcılara sahip kullanıcılar keyifli, geliştirilmiş bir deneyim elde ederken, diğer tarayıcılardaki kullanıcılar standart, anlık gezinmeyi elde eder. Desteği CSS'de kontrol edebilirsiniz:

@supports (view-transition: none) {

  /* Tüm view-transition stilleri buraya gelir */

  ::view-transition-old(my-element) { ... }

}

Küresel Kitle için En İyi Uygulamalar

Animasyonları uygularken, dünya çapındaki çeşitli kullanıcıları ve cihazları göz önünde bulundurmak hayati önem taşır.

Performans: Animasyonlar hızlı ve akıcı olmalıdır. Tarayıcının işlemesi için ucuz olan CSS özelliklerini, özellikle transform ve opacity'yi canlandırmaya sadık kalın. width, height veya margin gibi özellikleri canlandırmak, her karede düzen yeniden hesaplamalarını tetikleyebilir, bu da özellikle düşük güçlü cihazlarda takılmalara ve kötü bir deneyime yol açabilir.

Erişilebilirlik: Bazı kullanıcılar animasyonlardan dolayı hareket hastalığı veya rahatsızlık yaşarlar. Tüm büyük işletim sistemleri, hareketi azaltmak için bir kullanıcı tercihi sunar. Buna saygı duymalıyız. prefers-reduced-motion medya sorgusu, bu kullanıcılar için animasyonlarınızı devre dışı bırakmanıza veya basitleştirmenize olanak tanır.

@media (prefers-reduced-motion: reduce) {

  ::view-transition-group(*),

  ::view-transition-old(*),

  ::view-transition-new(*) {

    /* Tüm özel animasyonları atla ve hızlı, basit bir geçiş kullan */

    animation: none !important;

  }

}

Kullanıcı Deneyimi (UX): İyi geçişler amaçlıdır. Kullanıcının dikkatini yönlendirmeli ve arayüzde meydana gelen değişiklik hakkında bağlam sağlamalıdırlar. Çok yavaş bir animasyon, bir uygulamanın hantal hissetmesine neden olabilirken, çok gösterişli bir animasyon dikkat dağıtıcı olabilir. 200ms ile 500ms arasında geçiş süreleri hedefleyin. Amaç, animasyonun görülmesinden çok hissedilmesidir.

Sonuç: Gelecek Akıcıdır

CSS View Transitions API ve özellikle onun güçlü pseudo-element ağacı, web kullanıcı arayüzleri için devasa bir ileri adımdır. Geliştiricilere, bir zamanlar yalnızca yerel uygulamaların alanı olan akıcı, durum bilgisi olan geçişler oluşturmak için yerel, performanslı ve son derece özelleştirilebilir bir araç seti sunar. ::view-transition, ::view-transition-group ve old/new görüntü çiftlerinin rollerini anlayarak, basit geçişlerin ötesine geçebilir ve kullanılabilirliği artıran ve kullanıcıları memnun eden karmaşık, anlamlı animasyonlar düzenleyebilirsiniz.

Tarayıcı desteği genişledikçe, bu API modern ön uç geliştiricisinin araç setinin önemli bir parçası haline gelecektir. Yeteneklerini benimseyerek ve performans ve erişilebilirlik için en iyi uygulamalara bağlı kalarak, sadece daha işlevsel değil, aynı zamanda her yerde herkes için daha güzel ve sezgisel bir web inşa edebiliriz.